<template>
  <div class="bg">
    <!-- <nav-com title="22" :showView="true" @back="backHandler()">
    </nav-com> -->
    <!-- <van-pull-refresh style="overflow:none;" v-model = 'isLoading' @refresh='onRefresh'> -->
    <div class="box_ref">
      <van-row class="my_top">
        <van-col class="my_top_left">
          <img :src="avatar" />
        </van-col>
        <div class="my_top_right">
          <div
            class="qwsj"
            @click="toAppStatistics()"
            style="display: none;"
          >
            <div>全网数据</div>
            <div>
              <van-icon
                name="arrow"
                color="#fff"
              />
            </div>
          </div>
          <p>{{nickname}} <span style="border:1px solid #fe4b20;color: #fe4b20;font-size:3.2vw;margin:1vw;padding:0.5vw">{{is_realName?'已实名':'未实名'}}</span></p>
          <!-- <span>{{shareUser.role_name }}</span> -->
          <div style="margin-top:3vw">{{cellphone}}</div>
          <div class="user-role">
            <div class="box-xie">
              <img
                src="../../assets/my/king.png"
                style="width:15px"
              >
              <div class="box-text">{{rolesList[0]}} ></div>
            </div>
            <div
              v-if="rolesList[1]"
              class="box-xie"
              style="background:rgba(0, 132, 255, 0.2);color:#0084FF"
            >
              <img
                src="../../assets/my2/r2.png"
                style="width:15px"
              >
              <div class="box-text">{{rolesList[1]}}</div>
            </div>
            <div
              v-if="rolesList[2]"
              class="box-xie"
              style="background:rgba(180, 0, 255, .2);color:#B400FF"
            >
              <img
                src="../../assets/my2/r3.png"
                style="width:15px"
              >
              <div class="box-text">{{rolesList[2]}}</div>
            </div>
          </div>
        </div>
        <!-- <div class="roles">
          <img
            src="../../assets/my/king.png"
            style="width:6vw"
          >
          <div>{{shareUser.role_name}}</div>
          <img
            src="../../assets/my/rightW.png"
            style="width:2vw;height:3vw"
          >
        </div> -->
      </van-row>
      <div
        class="info-box box-one"
        style="padding:3vw 0vw"
      >
        <div class="item-3">
          <div
            class="little-box"
            style=""
            @click="handleClick(30)"
          >
            <p class="numbers">{{userInfo.price}}</p>
            <p>充值钱包</p>
          </div>
          <div
            class="little-box"
            @click="handleClick(33)"
          >
            <p class="numbers">{{userInfo.lp_price}}</p>
            <p>零批余额</p>
          </div>
          <div
            class="little-box"
            @click="handleClick(32)"
          >
            <p class="numbers">{{userInfo.advert_price}}</p>
            <p>广告创收</p>
          </div>
          <div
            class="little-box"
            @click="handleClick(31)"
          >
            <p class="numbers">{{userInfo.old_price}}</p>
            <p>老余额</p>
          </div>
        </div>
      </div>
      <div class="info-box">
        <div
          class="title"
          @click="handleClick(6)"
        >
          我的市场
          <div style="float:right;font-size:5vw;color:#999;font-weight:400;font-size:16px">详情 <img
              src="../../assets/m3.png"
              style="height:3.5vw"
            /></div>
        </div>
        <div
          class="item-3"
          style="line-height:8vw"
        >
          <div class="little-box">
            <p class="numbers">{{userInfo.sum_user_count}}</p>
            <p>总分享人数</p>
            <p class="numbers">{{userInfo.m_one_sum}}</p>
            <p>本月业绩</p>
          </div>
          <div class="little-box">
            <p class="numbers">{{userInfo.team_count}}</p>
            <p>我的总分享人数</p>
            <p class="numbers">{{userInfo.y_one_sum}}</p>
            <p>昨日业绩</p>
          </div>
          <div class="little-box">
            <p class="numbers">{{userInfo.my_share}}</p>
            <p>我的分享人数</p>
            <p class="numbers">{{userInfo.one_sum}}</p>
            <p>今日业绩</p>
          </div>
        </div>
        <div
          class="btn"
          @click.stop="handleClick(20)"
        >激励订单榜>></div>
      </div>

      <div class="imgBtn">
        <img
          @click="handleClick(4)"
          class="img1"
          src="../../assets/my/tofutrue.png"
        >
        <img
          @click="handleClick(5)"
          class="img2"
          src="../../assets/my/sahreicon.png"
        >
      </div>

      <div class="info-box">
        <div
          class="title"
          @click="handleClick(7)"
        >
          联创伙伴
          <div style="float:right;font-size:5vw;color:#999;font-weight:400;font-size:16px">详情 <img
              src="../../assets/m3.png"
              style="height:3.5vw"
            /></div>

        </div>
        <div>
          <div
            class="item-3"
            style="justify-content: space-around"
          >
            <div class="little-box">
              <p class="numbers">{{madetogetherInfo.total_amount_sum}}元</p>
              <p>联创总收益</p>
            </div>
            <div class="little-box">
              <p class="numbers">{{madetogetherInfo.yestoday_num_sum}}元</p>
              <p>上月联创总收益</p>
            </div>
          </div>
          <div class="item-3">
            <div class="little-box ">
              <p class="numbers">{{madetogetherInfo.total_profit}}元</p>
              <p class="name">我的总收益</p>

            </div>
            <div class="little-box">
              <p class="numbers">{{madetogetherInfo.today_num}}元</p>
              <p class="name">我的当月收益</p>

            </div>
            <div class="little-box">
              <p class="numbers">{{madetogetherInfo.yestoday_num}}元</p>
              <p class="name">我的上月收益</p>

            </div>
          </div>
        </div>
        <div
          class="btn"
          @click.stop="handleClick(8)"
        >我要成为联创伙伴>></div>
      </div>
      <!-- <div class="imgBtn">
        <img
          @click="handleClick(9)"
          src="../../assets/my/collect.png"
          style="width:94vw"
        >
      </div> -->
      <div class="imgBtn">
        <img
          @click="handleClick(10)"
          src="../../assets/my/fzr.png"
          style="width:94vw"
        >
      </div>
      <div class="info-box">
        <div
          class="title"
          @click="handleClick(1)"
        >
          我的中军值：
          <!-- <span style="color:#FE4B20;font-weight:700">{{shareUser.score}}</span> -->
          <div style="float:right;font-size:5vw;color:#999;font-weight:400;font-size:16px">详情 <img
              src="../../assets/m3.png"
              style="height:3.5vw"
            /></div>
        </div>
        <div class="item-3">
          <div class="little-box">
            <p class="numbers">{{userInfo.score}}</p>
            <p class="name">积分值</p>
            <div class="menus">
              <div
                class="menus-item"
                @click="handleClick(2)"
              >转赠</div>
              <div
                style="margin:0 1vw"
                v-if="shareUser.score_exchange"
              >|</div>
              <div
                class="menus-item"
                @click="handleClick(11)"
                v-if="shareUser.score_exchange"
              >兑换提货券</div>
              <div style="margin:0 1vw">|</div>
              <div
                class="menus-item"
                @click="handleClick(3)"
              >兑换</div>
            </div>
          </div>
          <div class="little-box">
            <p
              class="numbers"
              style="height:5vw"
            > </p>
            <p class="name">转中军值</p>
            <div class="menus">
              <div
                class="menus-item"
                @click="handleClick(21)"
              >未收到货</div>
              <div style="margin:0 1vw">|</div>
              <div
                class="menus-item"
                @click="handleClick(22)"
              >未发津贴</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="info-box">
        <div
          @click="handleClick(10)"
          style="display:flex;justify-content: space-between;border-bottom: 1px solid #EEEEEE;line-height: 35px;align-items: center;"
        >
          <div>我要成为独立负责人</div>
          <div>
            <van-icon name="arrow" />
          </div>
        </div>
        <div
          v-if="shareUser.is_leader==1"
          @click="handleClick(12)"
          style="display:flex;justify-content: space-between;line-height: 35px;align-items: center;"
        >
          <div>独立负责人审批</div>
          <div>
            <van-icon name="arrow" />
          </div>
        </div>
      </div> -->
      <div
        class="info-box"
        v-if="shareUser.is_leader==1||shareUser.is_sep_income==1"
      >
        <div class="title">
          我是负责人
          <!-- <span style="color:#FE4B20;font-weight:700">{{shareUser.score}}</span> -->
          <div style="float:right;font-size:5vw;color:#999">
            <!-- <img
              src="../../assets/m3.png"
              style="height:3.5vw"
            /> -->
          </div>
        </div>
        <div class="item-3">
          <div
            class="little-box"
            v-if="shareUser.is_leader"
          >
            <p style="display:flex;align-items: center;"><img
                src="../../assets/my2/f1.png"
                style="width:25px;margin-right:10px"
              >项目负责人</p>
            <div class="menus2">
              <div
                class="menus2-item"
                @click="handleClick(14)"
              >审批</div>
              <div
                class="menus2-item"
                @click="handleClick(15)"
              >统计</div>
              <div
                class="menus2-item"
                @click="handleClick(12)"
              >冻结&查看</div>
            </div>
          </div>
          <div
            class="little-box"
            v-if="shareUser.is_sep_income"
          >

            <p style="display:flex;align-items: center;"><img
                src="../../assets/my2/f2.png"
                style="width:25px;margin-right:10px"
              >独立负责人</p>
            <div class="menus2">
              <div
                class="menus2-item"
                @click="handleClick(17)"
              >审批</div>
              <div
                class="menus2-item"
                @click="handleClick(16)"
              >统计</div>
              <div
                class="menus2-item"
                @click="handleClick(13)"
              >冻结&查看</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getFttuserUserId2,
  getuserInfo,
  madeTogehter,
  getFttusers2,
  getCardinfo,
} from "@/api/api";
const config = {
  headers:{
    'Authorization': localStorage.getItem("token"),
    'token': localStorage.getItem("token")
  }
};

import navCom from "@/component/nav";
import { Toast } from "vant";
export default {
  name: "my2",
  components: {
    navCom,
  },
  data() {
    return {
      is_realName: "",
      avatar: "",
      cellphone: "",
      shareUser: {},
      madetogetherInfo: {},
      userInfo: {},
      nickname: "",
      rolesList: [],
    };
  },
  mounted() {
    this.init();
  },

  methods: {
    //初始化
    init() {
      getuserInfo().then((res) => {
        console.log("getuserInfo", res);
        if (res.data.code == 1) {
          this.shareUser = res.data.data;
          this.rolesList = res.data.data.role_name_future.split(",");
        }
      });
      getCardinfo()
        .then((result) => {
          this.is_realName = result.data.data.name;
        })
        .catch((err) => {});
      getFttuserUserId2().then((res) => {
        console.log("getFttuserUserId2", res);
        if (res.data.code == 1) {
          this.nickname = res.data.data.nickname;
          this.avatar = res.data.data.avatar;
          let cellphone = res.data.data.mobile;
          this.mobile = res.data.data.mobile;
          let str = cellphone.substring(0, 3) + "****" + cellphone.substring(7);
          this.cellphone = str;
        }
      });
      madeTogehter()
        .then((res) => {
          if (res.data.code == 1) {
            this.madetogetherInfo = res.data.data;
          }
        })
        .catch((err) => {});
      let urls = `${localStorage.getItem("share_weixin_shareurl")}/api/share/getuser`
      this.$axios.post(urls,{},config).then(res=>{
        if(res.data.code == 1){
          this.dataInfo = res.data.data;
        }else{
          this.$dialog.alert({
            message:res.data.msg
          })
        }
      })
    },
    handleClick(val) {
      if (val == 1) {
        this.$router.push("/transferRecord");
      } else if (val == 2) {
        this.$router.push("/scoreTransfer");
      } else if (val == 3) {
        this.$router.push("/stockExchange");
      } else if (val == 4) {
        this.$router.push("/toFuture");
      } else if (val == 5) {
        this.$router.push("/shares");
      } else if (val == 6) {
        this.$router.push("/myteamAd");
      } else if (val == 7) {
        this.$router.push("/togetherMade");
      } else if (val == 8) {
        this.$router.push("/togetherInvitation");
      } else if (val == 9) {
        this.$router.push("/applyService1");
      } else if (val == 10) {
        this.$router.push("/toFuture2");
      } else if (val == 11) {
        this.$router.push("/exchange");
      } else if (val == 12) {
        this.$router.push({
          name: "independentPerson",
          params: { operType: 1 },
        });
      } else if (val == 13) {
        this.$router.push({
          name: "independentPerson",
          params: { operType: 0 },
        });
      } else if (val == 14) {
        this.$router.push({
          name: "approval",
          params: { operType: 1 },
        });
      } else if (val == 15) {
        this.$router.push({
          name: "statistics",
          params: { operType: 1 },
        });
      } else if (val == 16) {
        this.$router.push({
          name: "statistics",
          params: { operType: 2 },
        });
      } else if (val == 17) {
        this.$router.push({
          name: "approval",
          params: { operType: 2 },
        });
      }else if (val == 20) {
        this.$router.push("/myteam");
      } else if (val == 21) {
        this.$router.push("/applyService1");
      } else if (val == 22) {
        this.$router.push("/noAllowance");
        // Toast('系统开发中')
      } else if (val == 30) {
        this.$router.push({
          name: "list",
          params: { openType: 0 },
        });
      } else if (val == 31) {
        this.$router.push({
          name: "list",
          params: { openType: 1 },
        });
      } else if (val == 32) {
        this.$router.push({
          name: "list",
          params: { openType: 2 },
        });
      } else if (val == 33) {
        this.$router.push({
          name: "list",
          params: { openType: 3 },
        });
      }
    },
    toAppStatistics() {
      this.$router.push("/appStatistics");
    },
  },
};
</script>
<style scoped>
.menus2 {
  display: flex;
  height: 7vw;
  margin-top: 2vw;
  color: #fe4b20;
}
.menus2 .menus2-item {
  border: 1px solid #fe4b20;
  line-height: 7vw;
  margin-right: 1vw;
  padding: 0 1vw;
  font-size: 12px;
  border-radius: 1vw;
}
.menus {
  display: flex;
  height: 7vw;
  border: 1px solid #fe4b20;
  line-height: 7vw;
  border-radius: 3.5vw;
  padding: 0 2vw;
  font-size: 12px;
  color: #fe4b20;
  margin-top: 2vw;
}

.user-role {
  display: flex;
  font-size: 10px;
}
.user-role .box-xie {
  display: flex;
  align-items: center;
  margin-right: 3px;
  padding: 2px 5px;
  background: rgba(254, 75, 32, 0.3);
  color: #fe4b20;
  transform: skewX(-20deg);
}
.user-role .box-xie img {
  transform: skewX(20deg);
}
.user-role .box-xie .box-text {
  margin-left: 2px;
  transform: skewX(20deg);
}
.roles {
  float: right;
  margin: 22vw -7vw 0 0;
  min-width: 31vw;
  background: #fe4b20;
  height: 7vw;
  border-radius: 7vw;
  line-height: 7vw;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10vw;
  padding-left: 2vw;
  font-size: 3.5vw;
}
.made-2 {
  display: flex;
  align-items: center;
}
.made-2 .box-left {
  line-height: 9vw;
  text-align: center;
  width: 35vw;
  border-right: 1px solid #eee;
}
.made-2 .box-left .numbers {
  color: #fe4b20;
  font-size: 4vw;
  font-weight: 600;
}
.made-2 .box-right {
  margin-left: 2vw;
  width: 50vw;
  line-height: 12.8vw;
}
.made-2 .box-right .numbers {
  color: #fe4b20;
  font-size: 4vw;
  font-weight: 600;
}
.made-2 .box-right .name {
  display: inline-block;
  min-width: 30vw;
}
.imgBtn {
  margin: 0 3vw;
}
.imgBtn .img1 {
  width: 60vw;
  height: 25vw;
}
.imgBtn .img2 {
  margin-left: 2vw;
  width: 32vw;
  height: 25vw;
}
.btn {
  margin: 5vw auto;
  margin-bottom: 0;
  width: 50vw;
  height: 10vw;
  line-height: 10vw;
  text-align: center;
  color: #fe4b20;
  border: 1px solid #fe4b20;
  border-radius: 2vw;
}
.info-box {
  background: #fff;
  margin: 3vw;
  padding: 3vw;
  border-radius: 2vw;
}
.box-one {
  margin-top: -15vw;
}
.info-box .title {
  font-size: 4.1vw;
  margin: 3vw 3vw;
  font-weight: 700;
}
.info-box .item-3 {
  margin: 4vw 3vw 1vw 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.info-box .item-3 .little-box {
  /* width: 33vw; */
  text-align: center;
}
.info-box .item-3 .little-box .numbers {
  font-size: 4.6vw;
  font-weight: 700;
  color: #fe4b20;
  margin-bottom: 1.5vw;
}
p {
  margin: 0;
  padding: 0;
}
.bg {
  background: #f1f3f6;
  position: relative;
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
}
.box_ref {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.my_top {
  width: 100%;
  height: 55vw;
  background: url(../../assets/mbg.png);
  background-size: 100%;
}
.my_top_left {
  padding-top: 20vw;
  padding-left: 5vw;
}
.my_top_left img {
  width: 14.66vw;
  height: 14.66vw;
  border-radius: 7.33vw;
}
.my_top_right {
  padding-left: 5.3vw;
  padding-top: 20vw;
}
.my_top_right p {
  font-size: 4.8vw;
}
/* .my_top_right span {
  margin-top: 1.3vw;
  line-height: 6.2vw;
  padding-left: 8vw;
  background: url(../../assets/m2.png);
  background-size: 100%;
  text-align: center;
  display: block;
  width: 21.33vw;
  height: 6.2vw;
  font-size: 2.9vw;
  color: #fff;
} */
.qwsj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 15px;
  background: #fe4b20;
  border-radius: 20px 0px 0px 20px;
  position: absolute;
  right: 0px;
  color: #fff;
}
</style>
